<template>
  <div class="logo">
    <router-link :to="routerLinkTo">

      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
      <!-- <img v-if="navTheme === 'dark'" src="~@/assets/logo-white.png" alt="logo">
      <img v-else src="~@/assets/logo.png" alt="logo"> -->
      <img src="~@/assets/logo-white.png" alt="logo">
      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->

      <h1 v-if="showTitle">
        <a-spin v-if="loading" :spinning="loading" />
        <template v-else>{{ title }}</template>
      </h1>
    </router-link>
  </div>
</template>

<script>
import Vue from 'vue'
import { mixin } from '@/utils/mixin.js'
import { getAction } from '@/api/manage'
import { TENANT_ID } from "@/store/mutation-types"

export default {
  name: 'Logo',
  mixins: [mixin],
  props: {
    showTitle: {
      type: Boolean,
      default: true,
      required: false
    },
    // 点击Logo跳转地址
    routerLinkTo: {
      type: Object,
      default: () => ({ name: 'dashboard' }),
    },
  },
  data() {
    return {
      title: process.env.VUE_APP_PLATFORM_NAME,
      loading: false,
      url: {
        tenantDetail: "/sys/tenant/queryById"
      }
    }
  },
  created() {
    let tenantid = Vue.ls.get(TENANT_ID)
    if (!tenantid) {
      tenantid = 0
    }

    // this.getTenantDetail(tenantid)
  },
  methods: {
    // 查询租户详情
    getTenantDetail(tenantid) {
      let params = {
        id: tenantid
      }
      this.loading = true
      getAction(this.url.tenantDetail, params).then(res => {
        if (res.success && res.result && res.result.name) {
          this.title = res.result.name
        }
      }).finally(() => {
        this.loading = false
      })
    },
  }
}
</script>
<style lang="less" scoped>
/*缩小首页布 局顶部的高度*/
@height: 59px;

.sider {
  box-shadow: none !important;

  .logo {
    height: @height !important;
    line-height: @height !important;
    box-shadow: none !important;
    transition: background 300ms;

    a {
      color: white;

      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  &.light .logo {
    background-color: @primary-color;
  }
}
</style>